<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/NewNotice.css" />

	</head>

	<body>
		<div class="bottom-bow"></div>
		<div id="notice">
			<header class="mui-bar mui-bar-nav">
				<a style="color: #fff;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title" style="color: #fff;">公告通知</h1>
			</header>
			<div class="tab-list">
				<!--
                        	作者：1169774483@qq.com
                        	时间：2018-06-12
                        	描述：公告标题
                        -->
				<div class="index-tab-title" v-for="(item,index) in tabList" :style="item.nottID==nottID?'color: #2A83FF':''" @click="tabClick(item)">
					{{item.nottName}}
					<div class="index-tab-icon" :style="item.nottID==nottID?'right: 0':'right:100%'"></div>
				</div>
			</div>

			<div class="content-list">
				<div id="refreshContainer" class="list-container mui-scroll-wrapper">
					<div class="mui-scroll">
						<!--
                          	作者：1169774483@qq.com
                          	时间：2018-06-12
                          	描述：公告内容
                          -->
						<div class="new-content">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell item-list new-list-item" v-for="item in dataList" @click="detalisClick(item)">
									<div v-if="item.filesPath" class="new-img-wapper">
										<img :src="item.filesPrefix + item.filesPath" />
									</div>
									<div class="new-item-desc">
										<div class="desc-title">{{item.noticeTitle}}</div>
										<div class="desc-time">{{item.noticeCD}}</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>

		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/Width.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						auto: false, //可选,默认false.首次加载自动下拉刷新一次
						callback: refreshData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					},
					up: {
						height: 50, //可选.默认50.触发上拉加载拖动距离
						auto: true, //可选,默认false.自动上拉加载一次
						contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: loadMoreData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			});
			var notice = new Vue({
				el: '#notice',
				data: {
					nottID: '',
					nottType: '',
					index: 0,
					tabList: [],
					dataList: [],
				},
				created: function() {
					this.AnnouncementType()
				},
				methods: {
					tabClick: function(item) {
						this.nottID = item.nottID;
						this.nottType = item.nottType;
						this.index = 0
						this.dataList = []
						loadMoreData(item.nottID, item.nottType)
					},
					detalisClick: function(item) {
						var title = item.noticeTitle
						var id = item.noticeID
						var titleNView = {
							backgroundColor: '#2A83FF', //导航栏背景色
							titleText: title, //导航栏标题
							titleColor: '#ffffff', //文字颜色
							type: 'transparent', //透明渐变样式
							autoBackButton: true, //自动绘制返回箭头
						}
						mui.openWindow({
							url: 'details.html',
							id: 'details.html',
							styles: {
								titleNView: titleNView

							},
							extras: {
								textID: id,
							},
						});
					},
					AnnouncementType: function() {
						var that = this
						mui.post(httpUrl.testUrl + '/api/Notice/GetNoticeType', {}, function(res) {
							if(res.code === 1001) {
								that.nottID = res.data[0].nottID;
								that.nottType = res.data[0].nottType
								that.tabList = res.data
							} else {
								mui.toast('请求错误')
							}
						})
					}
				}
			})

			mui.plusReady(function() {
				FastClick.attach(document.body);
			})

			function refreshData() {
				mui.post(httpUrl.testUrl + '/api/Notice/GetNotice', {
					nottID: notice.nottID,
					nottType: notice.nottType,
					page: 1
				}, function(res) {
					if(res.code === 1001) {
						notice.dataList.splice(0, notice.dataList.length);
						notice.dataList = notice.dataList.concat(res.data);
						mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
						mui('#refreshContainer').pullRefresh().refresh(true);
						mui.toast('刷新成功')
					} else {
						mui.alert('请求错误')
					}
				})
			}

			function loadMoreData(id, type) {
				notice.index++
					if(!id && !type) {
						mui.post(httpUrl.testUrl + '/api/Notice/GetNoticeType', {}, function(res) {
							if(res.code === 1001) {
								GetNotice(res.data[0].nottID, res.data[0].nottType, notice.index)
							} else {
								mui.toast('请求错误')
							}
						})
					} else {
						GetNotice(id, type, notice.index)
					}
					console.log(notice.index)
			}
			
			function GetNotice(Xid, Xtype, index) {
				mui.post(httpUrl.testUrl + '/api/Notice/GetNotice', {
					nottID: notice.nottID || Xid,
					nottType: notice.nottType|| Xtype,
					page: index
				}, function(res) {
					console.log(res)
					if(res.code === 1001) {
						notice.dataList = notice.dataList.concat(res.data)
						mui('#refreshContainer').pullRefresh().endPullupToRefresh(notice.dataList.length > res.data);
					} else {
						mui.alert('请求错误')
					}
				})
			}
		</script>
	</body>
</html>



